<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <eHeader :permission="permission" />
      <crudOperation :permission="permission" :async="true">
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table 
      ref="table" v-loading="crud.loading" border :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler"
      :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }"
    >
      <!--<el-table-column type="selection" width="55" />-->
      <el-table-column prop="year" label="年度" :resizable="false" width="60px" >
        <template slot-scope="scope" >
          <div class="divToResult" @click="toResult(scope.row.year)">{{ scope.row.year }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="plots" label="参评地块数" :resizable="false" width="95px"/>
      <el-table-column prop="enterprises" label="参评企业数" :resizable="false" width="95px"/>
      <el-table-column label="A类" :resizable="false">
        <el-table-column prop="countA" label="家数" :resizable="false" width="75px"/>
        <el-table-column prop="percentA" label="占比" :resizable="false" width="75px">
          <template slot-scope="scope">
            <span>{{ scope.row.percentA }}</span><span>%</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="B类" :resizable="false">
        <el-table-column prop="countB" label="家数" :resizable="false" width="75px"/>
        <el-table-column prop="percentB" label="占比" :resizable="false" width="75px">
          <template slot-scope="scope">
            <span>{{ scope.row.percentB }}</span><span>%</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="C类" :resizable="false">
        <el-table-column prop="countC" label="家数" :resizable="false" width="75px"/>
        <el-table-column prop="percentC" label="占比" :resizable="false" width="75px">
          <template slot-scope="scope">
            <span>{{ scope.row.percentC }}</span><span>%</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="C-类" :resizable="false">
        <el-table-column prop="countCMinus" label="家数" :resizable="false" width="75px"/>
        <el-table-column prop="percentCMinus" label="占比" :resizable="false" width="75px">
          <template slot-scope="scope">
            <span>{{ scope.row.percentCMinus }}</span><span>%</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="D类" :resizable="false">
        <el-table-column prop="countD" label="家数" :resizable="false" width="75px"/>
        <el-table-column prop="percentD" label="占比" :resizable="false" width="75px">
          <template slot-scope="scope">
            <span>{{ scope.row.percentD }}</span><span>%</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="亩均税收(万元)" :resizable="false">
        <el-table-column prop="taxationSf" label="双凤" :resizable="false" />
        <el-table-column prop="taxationCity" label="全市" :resizable="false" />
      </el-table-column>
      <el-table-column label="亩均销售(万元)" :resizable="false">
        <el-table-column prop="saleSf" label="双凤" :resizable="false"/>
        <el-table-column prop="saleCity" label="全市" :resizable="false"/>
      </el-table-column>
      <el-table-column label="全市各板块六项指标" :resizable="false" width="95px">
        <template slot="header">
          <div>全市各板块<br/>六项指标</div>
        </template>
        <template slot-scope="scope">
          <el-button class="option-item" size="mini" type="warning" icon="el-icon-s-data"  title="六项指标"  @click="doViewIndex(scope.row.year)" />
        </template>
        </el-table-column>

      <!--   编辑与删除   -->
      <el-table-column
        label="操作"
        width="180px"
        align="center"
        fixed="right"
        :resizable="false"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            async
          >
            <!-- <el-button slot="left" class="option-item" size="mini" type="warning"  icon="el-icon-s-data"  title="六项指标"  @click="doViewIndex(scope.row.year)" /> -->
            <el-button slot="left" class="option-item" size="mini" type="primary" plain icon="el-icon-view"  title="查看"  @click="doView(scope.row.id)" />
          </udOperation>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudComment from '@/api/business/comment'
import eHeader from './module/header'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
const addPageUrl = '/business/comment/add';
const editPageUrl = '/business/comment/edit';
export default {
  name: 'CommentList',

  components: { eHeader, crudOperation, pagination, udOperation },
  cruds() {
    return CRUD({
      title: '资源集约利用评价',
      url: 'business/intensive_utilization/analysis/queryPage',
      crudMethod: { ...crudComment},
      addPage: true,
      addPageUrl: addPageUrl,
      editPage: true,
      editPageUrl: editPageUrl,
      editParams: ['id'],
      optShow: {
        add: true,
        edit: false,
        del: false,
        reset:true
      },
      query: {
        status:0
      }
    })
  },

  mixins: [presenter()],
  // 数据字典

  data() {
    return {
      permission: {
        add: [],
        edit: [],
        del: [],
        info: []
      },
      id: null,
      dialogFormVisible: false,
      form: {
        id: null,
      },
      
    }
  },

  created() {
    console.log(this.permission, 'permission')
  },

  methods: {
    doView(id) {
      console.log(id, 'id')
      this.$router.push('/business/comment/detail/' + id)
    },
    doViewIndex(year) {
      this.$router.push({
        path: '/business/index/' ,
        query: {
          year: year
        }
      })
    },
    addPlan() {
      this.$router.push('/business/comment/add')
    },
    onChangeStatus (record) {
      console.log('record : ', record)
    },
    toResult(year){
      this.$router.push({
        path: '/business/result',
        query: {
          year: year
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
 ::v-deep .svg-icon {
   vertical-align: middle;
 }
 /* Tooltip 文本 */
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 40px;
   background-color: #666;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;

   /* 定位 */
   position: absolute;
   z-index: 1;
   right: 28px;
   top: 0;
 }

 /* 鼠标移动上去后显示提示框 */
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
</style>

<style>
 .el-table th.el-table__cell > .cell{
  text-align: center;
  color: black
 }
 
 .divToResult:hover{
  cursor: pointer;
 }
</style>